---
import { Info } from 'lucide-react'
import type { HTMLAttributes } from 'astro/types'

export type Props = HTMLAttributes<'div'>

const { class: cls, ...props } = Astro.props
---

<!-- <p class="bg-accent/10 border-accent/30 dark:border-accent/10 rounded-lg border p-5"> -->
<div
	{...props}
	class:list={[
		cls,
		'border-faint py-4.5 flex gap-3 rounded-lg border bg-zinc-50 px-5 text-sm dark:bg-zinc-900'
	]}
>
	<Info className="mt-1 size-4 shrink-0" />
	<div class="flex-1 overflow-hidden">
		<div class="prose-zinc prose-sm prose dark:prose-invert">
			<slot />
		</div>
	</div>
</div>
